<!-- 项目费用 -->
<template>
  <div>
    <s-table
      ref="table"
      rowKey="id"
      :columns="$auth('PROJECT.PROJECT_COST_DETAIL_LIST') ? columns : []"
      bordered
      :loading="loading"
      :data="loadData">
      <template slot="title">
        <!-- 数字统计 start -->
        <!-- <div>{{ dataInfo }}</div> -->
        <a-descriptions v-if="$auth('PROJECT.PROJECT_COST_LIST')" title="项目费用"></a-descriptions>
        <a-row v-if="$auth('PROJECT.PROJECT_COST_LIST')" :gutter="48">
          <a-col :md="8" :sm="24">
            <a-statistic title="合同编号" :value="dataInfo.contractNo || '无'" style="margin-right: 50px" />
          </a-col>
          <!-- <a-col :md="8" :sm="24">
            <a-statistic title="项目预算" :precision="2" :value="dataInfo.budget" style="margin-right: 50px" />
          </a-col> -->
          <a-col :md="8" :sm="24">
            <a-statistic title="已付金额" :precision="2" :value="dataInfo.paid" style="margin-right: 50px" />
          </a-col>
          <a-col :md="8" :sm="24">
            <a-statistic title="账户余额" :precision="2" :value="dataInfo.proBalance" style="margin-right: 50px" />
          </a-col>
          <a-col :md="8" :sm="24">
            <a-statistic title="待付金额" :precision="2" :value="dataInfo.toPay" style="margin-right: 50px" />
          </a-col>
          <a-col :md="8" :sm="24">
            <a-statistic title="可用余额(还可申请)" :precision="2" :value="dataInfo.avBalance" style="margin-right: 50px" />
          </a-col>
        </a-row>
        <!-- 数字统计 end -->

        <a-descriptions v-if="$auth('PROJECT.PROJECT_COST_DETAIL')" title="项目明细" :style="{ marginTop: '20px' }"></a-descriptions>
        <div v-if="$auth('PROJECT.PROJECT_COST_DETAIL')" class="table-page-search-wrappers">
          <!-- 搜索栏 start -->
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="付款类型">
                  <a-select v-model="queryParam.type" placeholder="请选择" allowClear>
                    <a-select-option v-for="list in $const.APPLY_COST_TYPE" :key="list.value" :value="list.value">{{
                      list.desc
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="时间范围">
                  <a-range-picker
                    valueFormat="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    v-decorator="['range-time-picker']"
                    v-model="createTime"
                    @change="event_changeCreateTime"
                    style="width: 100%"
                  ></a-range-picker>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="当前状态">
                  <a-select v-model="queryParam.status" placeholder="请选择" allowClear>
                    <a-select-option v-for="list in $const.PAYMENT_STATUS" :key="list.value" :value="list.value">{{
                      list.desc
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetQueryParams()">重置</a-button>
                  <a-button v-if="$auth('PROJECT.PROJECT_COST_DETAIL_EXPORT')" style="margin-left: 8px" icon="export" @click="clickExport">导出</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
          <!-- 搜索栏 end -->
        </div>
      </template>
      <!-- 申请时间 start -->
      <template slot="createTime" slot-scope="text, record">
        <span>{{ record.createTime | moment }}</span>
      </template>
    </s-table>
    <div>
      <!-- table切换 start -->
      <a-tabs :activeKey="isFinanceDetailSkip" size="large" @change="handleTabsChange">
        <a-tab-pane key="1" tab="付款明细" v-if="$auth('PROJECT.PROJECT_PAY')">
          <!-- <a-tab-pane key="1" tab="付款明细"> -->
          <keep-alive>
            <PaymentList :datailId="$route.query.id" />
          </keep-alive>
        </a-tab-pane>
        <a-tab-pane key="3" tab="项目预算" v-if="$auth('PROJECT.PROJECT_BUDGET')" >
          <keep-alive>
            <BudgetList :budget-amt="dataInfo.budget" :datailId="$route.query.id" />
          </keep-alive>
        </a-tab-pane>
        <a-tab-pane key="2" tab="资金流水" v-if="$auth('PROJECT.PROJECT_INCOME')">
          <!-- <a-tab-pane key="2" tab="资金流水"> -->
          <keep-alive>
            <FinanceList :datailId="$route.query.id" />
          </keep-alive>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { getPaymentList } from '@/api/project/finance'
// import monitor from '@/utils/monitor'
// import overview from '@/monitor/overview/Detail-Responsible/Bill'
import { buildPaginationObj } from '@/components/Table'
// const watch = monitor(overview)

import PaymentList from '@/views/overview/detail/treasurer/components/payment/PaymentList'
import FinanceList from '@/views/overview/detail/treasurer/components/finance/FinanceList'
import BudgetList from '@/views/overview/detail/treasurer/components/budget/budgetList'

const columns = [
  {
    title: '付款类型',
    dataIndex: 'type'
  },
  {
    title: '申请单号',
    dataIndex: 'applyNo'
  },
  {
    title: '申请人ID',
    dataIndex: 'createrNo'
  },
  {
    title: '收款人ID',
    dataIndex: 'bankNo'
  },
  {
    title: '申请金额',
    dataIndex: 'totalAmount'
  },
  {
    title: '申请时间',
    dataIndex: 'createTime',
    scopedSlots: { customRender: 'createTime' }
  },
  {
    title: '当前状态',
    dataIndex: 'now'
  }
]
export default {
  name: '',
  components: {
    PaymentList,
    FinanceList,
    BudgetList
  },
  props: {
    datailId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      createTime: [],
      columns,
      loading: false,
      queryParam: {
        proId: this.$route.query.id,
        status: null
      },
      dataInfo: {},
      loadData: parameter => {
        if (this.$auth('PROJECT.PROJECT_COST_DETAIL_LIST')) {
          return getPaymentList(Object.assign(parameter, this.queryParam)).then(res => {
            // this.dataInfo = res.dataDto
            this.dataInfo = res
            return res.page
          })
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      },
      isFinanceDetailSkip: '1'
    }
  },
  mounted () {
    if (this.$store.state.app.financeKey) {
      this.isFinanceDetailSkip = this.$store.state.app.financeKey
    }
    if (this.$auth('PROJECT.PROJECT_PAY')) {
      this.isFinanceDetailSkip = '1'
    } else if (this.$auth('PROJECT.PROJECT_INCOME')) {
      this.isFinanceDetailSkip = '2'
    } else if (this.$auth('PROJECT.PROJECT_BUDGET')) {
      this.isFinanceDetailSkip = '3'
    }
  },
  methods: {
    clickExport () {
      const parseParams = (url, params) => {
        const paramsArray = []
        Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
        if (url.search(/\?/) === -1) {
          url += `?${paramsArray.join('&')}`
        } else {
          url += `&${paramsArray.join('&')}`
        }
        return url
      }
      const baseUrl = '/api'
      const api = '/boss/finance/recordExport'
      const fullUrl = baseUrl + api
      console.log(fullUrl)
      const dealUrl = parseParams(fullUrl, this.queryParam)
      console.log(this.queryParam)
      window.open(dealUrl, '_self')
    },
    // 时间选择回调
    event_changeCreateTime (value, dateString) {
      this.queryParam.bTime = dateString[0]
      this.queryParam.eTime = dateString[1]
    },
    // 重置查询条件
    resetQueryParams () {
      this.queryParam = {
        proId: this.$route.query.id,
        status: null
      }
      this.createTime = []
      this.$refs.table.refresh(true)
    },
    // tab栏切换
    handleTabsChange (key) {
      this.isFinanceDetailSkip = key
      this.$store.commit('changeFinanceKey', key)
    }
  }
}
</script>
<style scoped lang="scss"></style>
